<template>
	<view class="container">
		<!-- 固定头部区域 -->
		<view class="fixed-header">
			<!-- 搜索栏 -->
			<view class="search-box">
				<input class="search-input" type="text" placeholder="搜索素材" v-model="searchKeyword"
					@confirm="searchProducts" />
				<text class="search-btn" @tap="searchProducts">搜索</text>
			</view>
			
			<!-- 三个横向排列的图片 -->
			<view class="image-row">
				<view class="promo-image-container" @tap="goToBanner(1)">
					<image class="promo-image" src="https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/banner/banner01.png" mode="aspectFill" />
				</view>
				<view class="promo-image-container" @tap="goToBanner(2)">
					<image class="promo-image" src="https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/banner/banner02.png" mode="aspectFill" />
				</view>
				<view class="promo-image-container" @tap="goToBanner(3)">
					<image class="promo-image" src="https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/banner/banner03.png" mode="aspectFill" />
				</view>
			</view>
			
			<!-- 筛选栏 -->
			<view class="filter-options">
				<view :class="['filter-item', sortType === 'id' ? 'active' : '']" @tap="sortBy('id')">
					<text class="filter-text">综合</text>
					<text class="sort-icon"
						:class="sortType === 'id' ? (sortOrder === 'asc' ? 'icon-up' : 'icon-down') : ''">▲▼</text>
				</view>
				<view :class="['filter-item', sortType === 'product_back' ? 'active' : '']" @tap="sortBy('product_back')">
					<text class="filter-text">佣金</text>
					<text class="sort-icon"
						:class="sortType === 'product_back' ? (sortOrder === 'asc' ? 'icon-up' : 'icon-down') : ''">▲▼</text>
				</view>
				<view :class="['filter-item', sortType === 'product_profit' ? 'active' : '']" @tap="sortBy('product_profit')">
					<text class="filter-text">佣金率</text>
					<text class="sort-icon"
						:class="sortType === 'product_profit' ? (sortOrder === 'asc' ? 'icon-up' : 'icon-down') : ''">▲▼</text>
				</view>
				<view :class="['filter-item', sortType === 'product_price' ? 'active' : '']" @tap="sortBy('product_price')">
					<text class="filter-text">价格</text>
					<text class="sort-icon"
						:class="sortType === 'product_price' ? (sortOrder === 'asc' ? 'icon-up' : 'icon-down') : ''">▲▼</text>
				</view>
			</view>
		</view>

		<!-- 商品列表区域 -->
		<view class="scroll-container">
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in productList" :key="index" @tap="goToDetail(item.id)">
					<image class="product-image" :src="item.imgList[0].imagePath1" mode="aspectFill" />
					<view class="product-info">
						<view class="product-title">{{ item.productName }}</view>
						<view class="product-stats">
							<text class="commission">赚¥ {{ item.productBack }}</text>
							<text class="commission-rate">佣金{{ formatPercentage(item.productProfit) }}%</text>
							<text class="price">价格: {{ item.productPrice }}</text>
						</view>
						<view class="bth-banner">
							<text class="bth-text">点击领视频</text>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view class="loading-state">
					<view class="loading" v-if="loading">加载中...</view>
					<view class="no-more" v-if="noMore">已经到底了~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listProduct
	} from '@/api/products/product'

	export default {
		data() {
			return {
				searchKeyword: '',
				sortType: 'id',
				sortOrder: 'desc',
				productList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				noMore: false
			}
		},
		onLoad() {
			this.getProductList()
		},
		// 页面触底，加载更多
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			// 格式化百分比，保留最多2位小数，去掉末尾的0
			formatPercentage(value) {
				if (!value && value !== 0) return '0'
				return parseFloat((value * 100).toFixed(2))
			},
			getProductList() {
				if (this.noMore || this.loading) return
				this.loading = true
				const query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					productName: this.searchKeyword,
					sortType: this.sortType,
					sortOrder: this.sortOrder,
				}
				console.log('Loading products, page:', this.pageNum, 'query:', query)
				listProduct(query).then(res => {
					console.log('Products loaded:', res.rows.length, 'total:', res.total)
					if (this.pageNum === 1) {
						this.productList = res.rows
					} else {
						this.productList = [...this.productList, ...res.rows]
					}
					this.total = res.total
					this.noMore = this.productList.length >= this.total
					console.log('Product list length:', this.productList.length, 'noMore:', this.noMore)
				}).finally(() => {
					this.loading = false
				})
			},
			searchProducts() {
				this.pageNum = 1
				this.noMore = false
				this.getProductList()
			},
			sortBy(type) {
				if (this.sortType === type) {
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
				} else {
					this.sortType = type
					this.sortOrder = 'desc'
				}
				this.pageNum = 1
				this.noMore = false
				this.getProductList()
			},
			loadMore() {
				if (this.loading || this.noMore) return
				this.pageNum++
				this.getProductList()
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			goToBanner(bannerIndex) {
				console.log('点击banner:', bannerIndex)
				uni.navigateTo({
					url: `/pages/banner/pages/banner${bannerIndex}`
				})
			}
		}
	}
</script>


<style scoped>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.container::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/background/background.png');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		z-index: -1;
	}

	/* 固定头部区域 */
	.fixed-header {
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		z-index: 100;
		background-image: url('https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/background/background_top.png');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		padding-top: 20px;/* 顶部边距 */
	}

	/* 商品列表容器 */
	.scroll-container {
		flex: 1;
		margin-top: 250px; 
		padding-bottom: 20px;
	}


	.search-box {
		display: flex;
		background-color: #fff;
		border-radius: 20px;
		padding: 8px 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
		margin: 30px 12px 10px 12px;
	}

	.search-input {
		flex: 1;
		height: 30px;
		font-size: 14px;
		padding: 0 10px;
	}

	.search-btn {
		padding: 0 12px;
		font-size: 14px;
		color: #ff9500;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	/* 三个横向排列的图片 */
	.image-row {
		display: flex;
		padding: 10px 12px;
		gap: 8px;
	}

	.promo-image-container {
		flex: 1;
		height: 80px;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s;
		overflow: hidden;
	}

	.promo-image-container:active {
		transform: scale(0.95);
	}

	.promo-image {
		width: 100%;
		height: 100%;
		border-radius: 12px;
	}

	/* 筛选选项 */
	.filter-options {
		display: flex;
		padding: 10px 12px;
		gap: 8px;
		justify-content: flex-end;
	}

	.filter-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20px;
		padding: 8px 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.filter-item:active {
		transform: scale(0.95);
	}

	.filter-item.active {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.filter-text {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		transition: color 0.3s ease;
	}

	.filter-item.active .filter-text {
		color: #ff5e00;
		font-weight: bold;
	}

	.sort-icon {
		font-size: 14px;
		margin-left: 0px;
		color: #999;
		transition: color 0.3s ease;
		line-height: 0.8;
		letter-spacing: -3px;
	}

	.filter-item.active .sort-icon {
		display: none;
	}

	.sort-icon.icon-up,
	.sort-icon.icon-down {
		color: #ff9500;
	}

	/* 商品列表 */
	.product-list {
		padding: 20px 12px;
	}

	.product-item {
		display: flex;
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
		transition: transform 0.2s;
	}

	.product-item:active {
		transform: scale(0.98);
	}

	.product-image {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.product-info {
		flex: 1;
		margin-left: 12px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.product-title {
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #333;
		font-weight: bold;
	}

	.product-stats {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		margin-bottom: 8px;
		gap: 15px;
	}

	.commission,
	.commission-rate,
	.price {
		font-size: 12px;
		color: #666;
		text-align: left;
	}

	.commission {
		color: #e74c3c;
		font-weight: bold;
		font-size: 16px;
	}

	.price {
		color: #ff9500;
		font-weight: bold;
	}

	/* bth长条 */
	.bth-banner {
		background-color: #ff9500;
		border-radius: 15px;
		padding: 6px 12px;
		text-align: center;
		margin-top: 5px;
	}

	.bth-text {
		font-weight: bold;
		font-size: 14px;		
		font-weight: bold;
		color: #fff;
	}

	.vip-tag {
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(45deg, #ff9500, #ff5500);
		color: #fff;
		font-size: 11px;
		padding: 3px 8px;
		border-radius: 3px;
	}

	/* 加载状态 */
	.loading-state {
		padding: 20px 0;
		text-align: center;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.loading-text {
		margin-right: 8px;
		font-size: 14px;
	}

	.loading-dots {
		display: flex;
	}

	.dot {
		width: 6px;
		height: 6px;
		background-color: #999;
		border-radius: 50%;
		margin: 0 2px;
		animation: dotPulse 1.5s infinite ease-in-out;
	}

	.dot:nth-child(2) {
		animation-delay: 0.2s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes dotPulse {

		0%,
		100% {
			opacity: 0.4;
			transform: scale(0.8);
		}

		50% {
			opacity: 1;
			transform: scale(1);
		}
	}

	.no-more {
		font-size: 14px;
		color: #999;
		text-align: center;
		padding: 15px 0;
	}
</style>